今天建立 src/components/Map.js，讓 SyncETA Lite 第一次出現真正的地圖畫面。

建立地圖元件

// src/components/Map.js
import { Loader } from '@googlemaps/js-api-loader';

const loader = new Loader({
  apiKey: import.meta.env.VITE_GOOGLE_MAPS_API_KEY,
  version: 'weekly',
});

let mapInstance = null;

export async function initMap(container) {
  const { Map } = await loader.importLibrary('maps');

  mapInstance = new Map(container, {
    center: { lat: 25.0478, lng: 121.5170 }, // 預設：台北車站
    zoom: 14,
  });

  return mapInstance;
}

export async function addMarker(position, label) {
  const { Marker } = await loader.importLibrary('marker');
  return new Marker({
    position,
    map: mapInstance,
    label,
  });
}

在 main.js 中初始化地圖

// src/main.js
import { initMap, addMarker } from './components/Map.js';

const mapContainer = document.getElementById('map');

async function setupMap() {
  await initMap(mapContainer);

  // 先用固定座標測試：起點台北車站，終點西門
  await addMarker({ lat: 25.0478, lng: 121.5170 }, '起');
  await addMarker({ lat: 25.0421, lng: 121.5079 }, '訖');
}

setupMap();

記得給地圖容器一個高度

地圖是用像素撐開的元素，如果容器沒有高度，畫面會什麼都看不到。在 src/style.css 補上：

#map {
  width: 100%;
  height: 320px;
  border-radius: 8px;
  margin-top: 12px;
}

存檔後回到瀏覽器，應該就能看到一張以台北車站為中心的地圖，並標示出起點與訖點兩個標記。

小提醒

如果地圖沒有顯示、Console 出現 ApiNotActivatedMapError，代表 Day 11 忘記啟用 Maps JavaScript API；如果出現 RefererNotAllowedMapError，代表金鑰的網站限制設定沒有把你目前的開發網址加進白名單。

明天我們要讓地圖真正「動起來」：用 Directions API 計算起訖點之間的實際路線與所需時間。